<template>
    <div :data-sub="sub" :data-sup="sup" :style="{ '--size': size }" class="state" :class="type">
        <div class="icon"></div>
    </div>
</template>

<script lang="ts" setup>
import { StateOptions } from '@/types/game/state';
const { sub, sup, size = '24px', type } = defineProps<StateOptions>()
</script>

<style scoped>
.state {
    height: var(--size);
    width: var(--size);
    position: relative;
    border: #fff solid calc(var(--size) * 0.1);
    border-radius: 50%;
}

.state[data-sup]::before,
.state[data-sub]::after {
    font-size: calc(var(--size) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: calc(var(--size) / 2);
}

.state[data-sup]::before {
    content: attr(data-sup);
    left: calc(100% - var(--size) / 4);
    z-index: 1;
    background-color: rgb(0, 0, 255, 0.8);
}

.state[data-sub]::after {
    content: attr(data-sub);
    left: calc(100% - var(--size) / 4);
    top: calc(100% - var(--size) / 2);
    background-color: rgb(148, 0, 211, 0.8);
}

.state .icon {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    position: relative;
    font-size: calc(var(--size) * 0.6);
}

.icon::after {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255, 0.8);
}

.overlord .icon {
    background-image: linear-gradient(-135deg, red 20%, gold, #fff);
}

.overlord .icon::after {
    content: '伯';
    color: rgb(255, 228, 196, 0.8);
    text-shadow: -1px -1px 1px gray;
}

.alliance .icon {
    background-image: radial-gradient(rgb(0, 128, 128), rgb(0, 255, 255));
}

.alliance .icon::after {
    content: '盟';
    text-shadow: -1px -1px 1px gray, 1px 1px 1px gray;
}

.goodluck .icon {
    background-image: radial-gradient(red, gold, purple);
}

.goodluck .icon::after {
    content: '瑞';
    text-shadow: -1px -1px 1px gray, 1px 1px 1px gray;
}

.badluck .icon {
    background-image: radial-gradient(black, red)
}

.badluck .icon::after {
    content: '祸';
    text-shadow: 1px 1px 1px whitesmoke, -1px -1px 1px whitesmoke;
}

.war .icon {
    background-image: linear-gradient(135deg, #8B0000, 30%, #B8860B, #D2B48C);
}

.war .icon::after {
    content: '战';
    text-shadow: 1px 1px 3px red, -1px -1px 3px black;
}

.friend .icon {
    background-image: linear-gradient(135deg, blue, cyan, green);
}

.friend .icon::after {
    content: '友';
    text-shadow: 1px 1px 3px #000, -1px -1px 3px #fff;
}

.vassal .icon {
    background-image: radial-gradient(rgb(255, 255, 0), gray)
}

.vassal .icon::after {
    content: '附';
    text-shadow: 1px 1px #000, -1px -1px #000;
}

.master .icon {
    background-image: radial-gradient(rgb(149, 0, 255), gray)
}

.master .icon::after {
    content: '宗';
    text-shadow: 1px 1px #000, -1px -1px #000;
}
</style>